<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.global.js"></script>
</head>
<body>
    <!-- MVVM 它是一种设计模式. 
        M model数据层  V view视图  vm viewModel它连接数据和视图的桥梁 -->
    <div id="app">
        <!-- V  view 视图层 -->
        <h2>睡觉的人终于清醒了??{{username}}</h2>
    </div>
    <script>
        //Vue.createApp({//vue的配置项})
        const app=Vue.createApp({
            //数据配置项
            // data:function(){
            data(){//数据配置项必须返回一个对象.?? 为什么data配置项是一个函数？？
                // let d={};return d;
                return {//M model数据层
                    username:"老王"
                }
            },
            //比如其他选项 
            // methods:{},
            // computed:{},
            // watch:{},
            // components:{}
            // template:"", //view 视图层
            // render(){//view 视图层
            //     //配置项目里面函数可以直接this调用data里面的数据 不用this.data().xxx
            //     return Vue.h("h1",{},"睡觉的人终于清醒了??"+this.username)
            // }
        });
        //vm 就是vue的实例,它帮我们实现了数据双向绑定.
        const vm=app.mount("#app");
        console.log(vm);
    </script>
</body>
</html>